<template>
	<view>
		<!--聊天首页 -->
		
		<view class="videoBox">
			<image src="/static/images/chat1.jpg" class="video-chat" ></image>
			<image src="/static/images/chat2.jpg" class="video-chat" ></image>
			
			<!-- <video :src="item"
			:id="`fullVideo`+(index+1)"
			class="video-chat" 
			v-for="(item,index) in videoList" 
			:key="index"
			autoplay
			muted
			loop
			:controls="false"
			@click="screenVideo(item, 0, 0)"
			></video> -->
		</view>
		
		<!-- <view class="seatweat"></view> -->
		
		<view class="content">
			<view class="flex justify-between align-center marginbottom">
				<view class="title">群聊列表</view>
				<view class="flex align-center">
					<image src="/static/images/add.png" class="add-image"></image>
					<text class="add-title" @click="$wanlshop.auth('/pages/new/choiceFriend')">添加群聊</text>
				</view>
			</view>
			
			<view class="item" v-for="(item,index) in dataList" :key="index"
			@click="$wanlshop.auth('/pages/new/chat?group_id='+ item.id)"
			>
			
				<view class="position-relative" >
					<view class="cu-avatar round" 
					:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.image, 44, 44, 2, 'avatar') + ')' }">
					</view>
				
					<!-- <image :src="item.image"
					class="chat-image"
					mode="aspectFill"
					></image> -->
					<!-- <view class="red-icon"></view> -->
				</view>
				
				<view class="flex align-top justify-between w635 borderbootom">
					<view class="middle-box">
						<view class="title1 text-cut">{{item.name||''}}</view>
						<view class="title2 text-cut">{{item.message||''}}</view>
					</view>
					
					<view class="flex flex-direction align-center">
						<view class="time">{{item.recordtime||''}}</view>
						<view class="weidu_num" v-if="item.readnum > 0">{{item.readnum||0}}</view>
					</view>
					
				</view>
			</view>
			
		</view>
		
		
		<uni-load-more :status="status" :content-text="contentText" />
		
		
		
		<view v-if="videoPlay">
		    <video
		         controls
				 autoplay
		         id="fullVideo"
		         :src="videoUrl"
		         @fullscreenchange="screenChange"
		         :vslide-gesture-in-fullscreen="false"
				class="fullVideo"
		      ></video>
		</view>
		
		
	</view>
	
</template>

<script>
export default {
	data() {
		return {
			videoUrl:'',
			videoPlay:false,
			
			videoList:[],
			dataList: [],
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			}
		}
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	onLoad() {
	},
	onShow(){
		this.reload = true;
		this.videoPlay = false;
		this.loadData();
		
		let tmp = uni.createVideoContext("fullVideo1", this);
		tmp.play();
		
		tmp = uni.createVideoContext("fullVideo2", this);
		tmp.play();
	},
	methods: {
		screenVideo(url, width, height){
			this.videoUrl = url;
			this.videoPlay = true;
		    let ratio = width > height ? 90 : 0;
		    this.videoContext = uni.createVideoContext("fullVideo", this);
		    this.videoContext.requestFullScreen({ direction: ratio });  
		    this.videoContext.play();
		},
		screenChange(e) {
		    let fullScreen = e.detail.fullScreen;
		    if (!fullScreen) {
		      this.videoPlay = false;
			  
			  let tmp = uni.createVideoContext("fullVideo1", this);
			  tmp.play();
			  
			  tmp = uni.createVideoContext("fullVideo2", this);
			  tmp.play();
		    }
		},
		loadData(){
			uni.request({
				url: '/im/grouplist',
				method: 'GET',
				data: {
					page: this.current_page,
				},
				success: res => {
					console.log("loadChatList", res);
					this.videoList = res.data.immp4;
					
					res.data.data.forEach(function(value, index){
						let tmp = {};
						if(value.record != ''){
							console.log(JSON.parse(value.record))
							tmp = JSON.parse(value.record);
						}
						
						value.message = ''; 
					
						if(tmp && tmp.message && tmp.message.type == 'text'){
							value.message = tmp.message.content.text; 
						}
						
						if(tmp && tmp.message && tmp.message.type == 'img'){
							value.message = '[图片]'; 
						}
					})
					
					uni.stopPullDownRefresh();
					this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data.data);//数据 追加
					this.total = res.data.total; //数据量
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore' : 'more';
				}
			});		},
	}
}	
</script>

<style>
page{
	background-color: #ffffff;
}
</style>

<style lang="scss" scoped>
.title{
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
}

.add-image{
	width: 26rpx;
	height: 26rpx;
	margin-right: 14rpx;
}

.add-title{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929
}

.content{
	background-color: #ffffff;
	padding: 32rpx 24rpx 24rpx 24rpx;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	margin-top: -20rpx;
}

.chat-image{
	width: 86rpx;
	height: 86rpx;
	border-radius: 50%;
	margin-right: 17rpx;
}

.item{
	padding: 0rpx 0 32rpx 0rpx;
	display: flex;
	align-items: top;
	justify-content: space-between;
}

.title1{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
	width: 400rpx;
}

.title2{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #666666;
	margin-top: 20rpx;
	width: 400rpx;
}

.w635{
	width: 635rpx;
}
.borderbootom{
	border-bottom: 1rpx solid #EBEBEB;
	padding-bottom: 41rpx;
}
.marginbottom{
	margin-bottom: 32rpx;
}

.time{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
}

.red-icon{
	width: 17rpx;
	height: 17rpx;
	background: #F53938;
	border-radius: 50%;
	position: absolute;
	right: 26rpx;
	top: 0rpx;
}

.videoBox{
	display: flex;
	justify-content: space-between;
	padding: 24rpx 24rpx 44rpx 24rpx;
	background:url('/static/images/chat_bg.png') no-repeat;
	background-size: 100% 100%;
}

.video-chat{
	width: 340rpx;
	height: 385rpx;
	border-radius: 16rpx;
}

.seatweat{
	width: 100%;
	height: 20rpx;
	background-color: #F7F7F7;
}

.fullVideo{
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0rpx;
	left: 0rpx;
}

.weidu_num{	
	margin-top: 20rpx;
	background: red;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	width: 40rpx;
	height: 40rpx;
	margin-top: 20rpx;
	line-height: 40rpx;
}
</style>